<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #box1 {
        width: 300px;
        height: 300px;
        background: blueviolet;
    }

    #box2 {
        width: 200px;
        height: 200px;
        background: aquamarine;
    }

    #box3 {
        width: 100px;
        height: 100px;
        background: tomato;
    }

    div {
        overflow: hidden;
        margin: 50px auto;
    }

    .entrust {
        position: absolute;
        left: 20%;
        top: 50%;
        color: blue;

    }
</style>

<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <div class="entrust">
        <ul id="isUl">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li id='li08'>9</li>
        </ul>
    </div>
    <script>
        // 事件冒泡与事件委托
        // https://www.jianshu.com/p/d3e9b653fa95
        function sayBox3() {
            console.log('你点了最里面的box');
        }
        function sayBox2() {
            console.log('你点了最中间的box');
        }
        function sayBox1() {
            console.log('你点了最外面的box');
        }
        // 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
        document.getElementById('box3').addEventListener('click', sayBox3, true);
        document.getElementById('box2').addEventListener('click', sayBox2, true);
        document.getElementById('box1').addEventListener('click', sayBox1, true);

        // 这里不讲IE，结尾再说
        function clickLi() {
            console.log('你点击了li');
        }
        function sayli() {
            // 阻止冒泡
           
            console.log('你点击了最后一个li');
             event.stopPropagation();
        }
        document.getElementById('li08').addEventListener('click', sayli, false);
        document.getElementById("isUl").addEventListener('click', (event) => {
            // 每一个函数内都有一个event事件对象，它有一个target属性，指向事件源
            var src = event.target;
            // 我们判断如果target事件源的节点名字是li，那就执行这个函数
            // target里面的属性是非常多的，id名、class名、节点名等等都可以取到
            // toLowerCase把字符串转换为小写
            if (src.nodeName.toLowerCase() == 'li') {
                clickLi();
            }
        })

    </script>
</body>

</html>